<template>
	<view class="page">
		<!-- #ifdef H5 -->
		<custom-navbar title="物流详情" />
		<!-- #endif -->
		<!-- Order Status -->
		<view class="status-section">
			<view   v-for="(item,index) in processSteps.slice(0, 2)" :key="index">
				<image class="status-icon" src="https://image.chushouya.com/assets/images/product/icon_click@2x.png"
					mode="aspectFill" @click="onOpenTracking" />
				<view class="status-item" :class="index==0?'active':''">{{item.desc}}</view>
				<view class="status-desc" v-if="index==0">{{item.statusText}}</view>
			</view>
		</view>

		<!-- Product Info -->
		<view class="product-section">
			<view class="section-title d-flex justify-content-between align-items-center">物品信息<view class="sub"
				@click="handleAttr">{{orderDetail.completePrice==0?'我的评估项':'质检报告'}}</view>
			</view>
			<view class="product-item">
				<view class="product-details d-flex justify-content-start align-items-center">
					<view class="product-image">
						<image :src="orderProduct.productImage" mode="aspectFill" />
					</view>
					<text class="product-name">{{ orderProduct.productName }}</text>
				</view>
				<view class="price-row d-flex justify-content-between align-items-center">
					<text class="price-label">预估回收价</text>
					<text class="price-value">¥{{ orderDetail.orderPrice }}</text>
				</view>
				<view class="price-inline d-flex justify-content-between align-items-center">
					<text class="price-label">物品估价</text>
					<text class="price-value">¥{{ orderDetail.evaluatePrice }}</text>
				</view>
			</view>
		</view>

		<!-- Order Info -->
		<view class="order-section">
			<view class="section-title">订单信息</view>
			<view class="info-row">
				<text class="info-label">订单编号</text>
				<text class="info-value">{{ orderDetail.orderNo }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">创建时间</text>
				<text class="info-value">{{ orderDetail.createTime }}</text>
			</view>
			<view class="info-row">
				<text class="info-label">回收方式</text>
				<text class="info-value">{{ orderDetail.orderTypeText }}</text>
			</view>
			<!-- <view class="info-row last-row">
				<text class="info-label">收款方式</text>
				<text class="info-value">{{ orderDetail.paymentMethod }}</text>
			</view> -->
			<!-- Contact Service -->
			<view class="contact-section" @click="urlJump({ routeType: 2, target: urlTarget })">
				<image class="contact-icon" src="https://image.chushouya.com/assets/images/product/icon_kefu@2x.png"
					mode="aspectFill" />
				<text class="contact-text">联系客服</text>
			</view>
		</view>
		<view class="fixed-footer d-flex justify-content-end align-items-center">
			<view @click="goEvaluation">重新估价</view>
		</view>

		<!-- 订单追踪 -->
		<popup-bottom ref="popup" :hideClose="true" :hideTitle="true" :isMaskClick="false" @close="onCloseTracking">
			<template #default>
				<view class="order-tracking">
					<image src="https://image.chushouya.com/assets/images/product/icon_close@2x.png" mode="aspectFill"
						class="close" @click="onCloseTracking"></image>
					<view class="title">订单追踪</view>
					<view class="status-list" v-for="(item,index) in processSteps"
						:key="index">
						<view class="status-item" :class="index==0?'active':''">{{item.desc}}</view>
						<view class="status-desc">{{item.statusText}}</view>
					</view>
				</view>
			</template>
		</popup-bottom>
		<price-detail-layer ref="priceDetailRef" :orderDetail="orderDetail" />
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getOrderProcessDetail
	} from "@/api";
	import PriceDetailLayer from './info-components/PriceDetailLayer.vue'
	export default {
		components: {
			PriceDetailLayer,
		},
		data() {
			return {
				urlTarget: 'https%3a%2f%2fszcskjyxgszj.qiyukf.com%2fclient%3fk%3d0e53e1b92d44e6d4ce46772a56d87068%26wp%3d1%26robotShuntSwitch%3d0%26shuntId%3d0%26language%3dzh-cn%26templateId%3d8131497',
				showLogistics: false,
				showTracking: false,
				orderDetail: {},
				orderProduct: {},
				orderProcessDetail: {},
				processSteps:[]
			};
		},
		methods: {
			onOpenTracking() {
				this.$refs.popup.open();
			},
			onCloseTracking() {
				this.$refs.popup.close();
			},
			loadDetail() {
				getOrderDetail({
					orderNo: this.orderNo
				}).then(({
					data,
					code
				}) => {
					if (code === 200) {
						this.orderDetail = data || {};
						this.loadOrderProcessDetail()
						this.orderProduct = data.orderProduct || {};
					}
				});
			},
			loadOrderProcessDetail() {
				getOrderProcessDetail({
					orderNo: this.orderNo
				}).then(({
					data,
					code
				}) => {
					if (code === 200) {
						this.orderProcessDetail = data || {};
						this.processSteps = data.completedSteps.reverse();
					}
				});
			},
			// 重新估价
			goEvaluation() {
				uni.navigateTo({
					url: `/pages/product/index?id=${this.orderProduct.productId}`
				})
			},
			handleAttr() {
				if (this.orderDetail.completePrice == 0) {
					this.$refs.priceDetailRef.onOpen();
				} else {
					uni.navigateTo({
						url: `/pages/inspection/index?orderNo=${this.orderNo}`
					})
				}
			}
		},
		onLoad(options) {
			if (options.orderNo || options.id) {
				this.orderNo = options.orderNo || options.id
				this.loadDetail()
			}
		},
		onShow() {},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f6f7f9;
		padding: 24rpx;
		/* #ifdef H5 */
  padding-top: calc(var(--status-bar-height) + 44px + 20rpx);
  /* #endif */
	}

	/* Status Section */
	.status-section {
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		position: relative;
	}

	.status-icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 36rpx;
		right: 32rpx;
		z-index: 1;
	}

	.status-item {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		margin-left: 40rpx;
		position: relative;

		&::before {
			display: inline-block;
			content: "";
			width: 16rpx;
			height: 16rpx;
			background: #e2e2e2;
			border-radius: 50%;
			position: absolute;
			left: -40rpx;
			bottom: 14rpx;
		}

		&.active::before {
			background: #ffce46;
		}
	}

	.status-desc {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin: 12rpx 0 32rpx 40rpx;
		position: relative;

		&::before {
			display: inline-block;
			content: "";
			width: 2rpx;
			height: calc(100% + 70rpx);
			background: #e2e2e2;
			position: absolute;
			left: -33.5rpx;
			top: -26rpx;
		}
	}

	.status-list {
		&:last-child {
			.status-desc::before {
				display: none;
			}
		}
	}

	/* Product Section */
	.product-section {
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}

	.section-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 24rpx;

		.sub {
			font-size: var(--hui-font-size-24);
			color: var(--hui-color-subtitle);
			font-weight: normal;
		}
	}

	.product-image {
		width: 126rpx;
		height: 126rpx;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.product-details {
		flex: 1;
		margin-bottom: 28rpx;

		.product-image {
			width: 106rpx;
			height: 106rpx;
			border-radius: 8rpx;
			border: 2rpx solid #eaeaea;
			margin-right: 32rpx;

			image {
				width: 106rpx;
				height: 106rpx;
			}
		}
	}

	.product-name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}

	.price-row {
		margin-bottom: 24rpx;

		.price-label {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.price-value {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.price-inline {
		height: 72rpx;
		background: #f6f7f9;
		border-radius: 16rpx;
		padding: 0 24rpx;

		.price-label {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
		}

		.price-value {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
		}
	}

	/* Order Section */
	.order-section {
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 24rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		&.last-row {
			margin-bottom: 0;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #eeeeee;
		}
	}

	.info-label {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	.info-value {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	/* Contact Section */
	.contact-section {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		padding-top: 24rpx;
		border-radius: 12rpx;
	}

	.contact-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.contact-text {
		color: #333333;
		font-size: 30rpx;
	}

	.order-tracking {
		position: relative;
		padding: 48rpx 32rpx 48rpx;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
			text-align: center;
		}
	}

	.fixed-footer {
		width: 100%;
		height: 102rpx;
		background: #ffffff;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.04);
		padding: 0 24rpx;
		position: fixed;
		bottom: 0;
		right: 0;

		view {
			width: 144rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			border-radius: 28rpx;
			border: 2rpx solid #eeeeee;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
	}
</style>